{% load humanize %}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>{% block title %}Rings{% endblock title%} | CMAT 21 Scoreboard</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="{% block description %}Live scoreboard for the 2012 Chinese Martial Arts Tournament{% endblock %}">
    <meta name="author" content="">
    <meta property="og:type" content="sports_league" />
    <meta property="og:url" content="http://scores.calwushu.org{{request.path}}" />
    <meta property="og:image" content="http://cmat.calwushu.org/wp-content/uploads/2012/01/cmat20banner.jpg" />
    <meta property="og:site_name" content="CMAT 21 Scoreboard" />
    <meta property="fb:admins" content="1036320285" />
    <script src="/static/jquery.js"></script>
    <script>
    var competitors = {{competitors_json|safe}};
    $(document).ready(function(){
      $('.search-query').typeahead({
        source: competitors,
      })
    });
    </script>
    <!-- Le styles -->
    <link href="/static/bootstrap/css/bootstrap.css" rel="stylesheet">
    <style>
      body {
        padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
      }
    </style>
    <link href="/static/bootstrap/css/bootstrap-responsive.css" rel="stylesheet">

    <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

    <!-- Le fav and touch icons -->
    <link rel="shortcut icon" href="images/favicon.ico">
    <link rel="apple-touch-icon" href="images/apple-touch-icon.png">
    <link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png">
    <link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png">
    <style>
    </style>
    <!--- Le Google Analytics --->
    <script type="text/javascript">
      var _gaq = _gaq || [];
      _gaq.push(['_setAccount', 'UA-28724473-2']);
      _gaq.push(['_trackPageview']);

      (function() {
        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
      })();

    </script>
    <!--- Le Facebook stuff --->
    <div id="fb-root"></div>
    <script>(function(d, s, id) {
      var js, fjs = d.getElementsByTagName(s)[0];
      if (d.getElementById(id)) return;
      js = d.createElement(s); js.id = id;
      js.src = "//connect.facebook.net/en_GB/all.js#xfbml=1&appId=175771299195396";
      fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));</script>
  {% block head %}{% endblock %}
  </head>

  <body>
  
    <div class="navbar navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
          <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </a>
          <a class="brand" href="/">CMAT 21 Scoreboard</a>
          <div class="nav-collapse">
            <ul class="nav">
              <li {% block ring_li %}{% endblock %}><a href="/rings">Rings</a></li>
              <li {% block event_li %}{% endblock %}><a href="/events">Events</a></li>
              <li {% block comp_li %}{% endblock %}><a href="/competitors">Competitors</a></li>
            </ul>
            <form class="navbar-search pull-right" action="/search" method="GET">
              <input name="query" type="text" class="search-query" data-provie="typeahead" placeholder="Search" autocomplete="off">
            </form>
          </div><!--/.nav-collapse -->
        </div>
      </div>
    </div>

    <div class="container">
      <div class="row">
        <div class="span12">
          <ul class="breadcrumb">
            {% block breadcrumb %}
            <li>
              <a href="#">Home</a> <span class="divider">/</span>
            </li>
            <li>
              <a href="#">Library</a> <span class="divider">/</span>
            </li>
            <li class="active">
              <a href="#">Data</a>
            </li>
            {% endblock breadcrumb %}
          </ul>
        </div>
        {% block navi_full %}
        <div class="span2">
          <ul class="nav nav-pills nav-stacked nav-list">
            {% block navi %}
              <li><a href="#">Navi 1</a></li>
              <li><a href="#">Navi 2</a></li>
            {% endblock navi %}
          </ul>
        </div>
        {% endblock navi_full %}
        {% block content_full %}
        <div class="span10">
          {% block content %}
          <h1>Bootstrap starter template</h1>
          <p>Use this document as a way to quick start any new project.<br> All you get is this message and a barebones HTML document.</p>
          {% endblock content %}
        </div>
        {% endblock content_full %}
        <div class="span2">
        </div>
      </div>
      <footer class="footer" style="padding: 36px 0 36px">
          <div class="fb-like" data-href="http://scores.calwushu.org{{request.path}}" data-send="false" data-width="450" data-show-faces="true"></div>
          <hr />
          <p class="pull-right">
            Created for the annual <a href="http://cmat.calwushu.org">Chinese Martial Arts Tournament</a>
          </p>
          <p>CMAT 21 Scoreboard - <a href="/mobile/?url={{url}}">Mobile Site</a></p>
          <p>&copy; 2012 Ryan Tseng</p>
          <p>For unofficial reference only, information may be incorrect or outdated</p>
          {% if last_updated %}<p>Last updated {{last_updated|naturaltime}}</p>{% endif %}
          {% if debug %}<p>{{debug}}</p>{% endif %}
      </footer>
    </div> <!-- /container -->
    <script src="/static/bootstrap/js/bootstrap-collapse.js"></script>
    <script src="/static/bootstrap/js/bootstrap-typeahead.js"></script>
  </body>
</html>
